<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>

<style>
	#container{
		height:auto;
		width: 1000px;
		display:inline-block;
		max-width: 1000px;
		}
	#registration {
		height:auto;
		display:inline-block;
		margin-left:250px;
		margin-top:30px;
		}
	#registrationgp {
		height:auto;
		display:inline-block;
		margin-left:250px;
		margin-top:30px;
	}
</style>

<div id="container">
	<s:radio id="type" label="Designer type: " key="type" list="{'Individual','Group'}" value="'Individual'" onChange="changeType(this.value);return false;" />
	<div id="registration">
		<sj:head locale="%{locale.language}" loadAtOnce="true"/>
		<s:actionerror/>
		<s:form action="register">
			<s:hidden key="type" value="Individual"/>
			<s:textfield label="Your Name" key="name" />
			<s:password label="Password" key="password" />
			<s:textfield label="Address" key="address" />
			<s:radio label="Gender" key="gender" list="{'Male','Female'}" />
			<s:textfield label="E-mail" key="email" />
			<s:textfield label="Phone Number" key="phone_number" type="integer"/>
			<s:textfield label="Education" key="education" />
			<s:textfield label="Bank Account Number" key="bank_account_number" type="long" value="0"/>
			<s:textfield label="Username" key="username" />
			<s:textarea label="Background" key="background" cols="40" rows="10" />
			<sj:datepicker 
                        name = "dobString"
                        label="Date of birth"
                        DisplayFormat = "% {getText ('pattern')}"
                        cssStyle = "width: 150px"
                        yearRange = "2013: 2020"
                        changeYear = "true"
                        changeMonth = "true"
                        readonly = "true"
                        title = "% {getText ('date')}"
                        showAnim = "slideDown"
                        duration = "fast" />
			<s:submit value="Submit" />
		</s:form>
	</div>
	
	<div id="registrationgp" >
		<sj:head locale="%{locale.language}" loadAtOnce="true"/>
		<s:actionerror/>
		<s:form action="register">
			<s:hidden key="type" value="Group"/>	
			<s:textfield label="Group Name" key="name" />
			<s:password label="Password" key="password" />
			<s:textfield label="E-mail" key="email" />
			<s:textfield label="Phone Number" key="phone_number" />
			<s:textfield label="Bank Account Number" key="bank_account_number" />
			<s:textfield label="Username" key="username" />
			<s:textarea label="Background" key="background" cols="40" rows="10" />
			<sj:datepicker 
                        name = "dobString"
                        label="Date of birth"
                        DisplayFormat = "% {getText ('pattern')}"
                        cssStyle = "width: 150px"
                        yearRange = "2013: 2020"
                        changeYear = "true"
                        changeMonth = "true"
                        readonly = "true"
                        title = "% {getText ('date')}"
                        showAnim = "slideDown"
                        duration = "fast" />
			<s:submit value="Submit" />
		</s:form>
	</div>
</div>

<script type="text/javascript">
	document.getElementById("registration").style.display = "block";
	document.getElementById("registrationgp").style.display = "none";
	function changeType(value){
		if(value == "Group"){
			document.getElementById("registration").style.display = "none";
			document.getElementById("registrationgp").style.display = "block";
		}
		else{
			document.getElementById("registration").style.display = "block";
			document.getElementById("registrationgp").style.display = "none";
		}
	}
</script>